<template>
  <el-dialog v-model="dialogVisible" title="VIP续费" width="500px" :close-on-click-modal="false" destroy-on-close>
    <div class="vip-renewal-container">
      <!-- 基础信息展示 -->
      <div class="info-section">
        <div class="info-item">
          <span class="label">店铺名称：</span>
          <span class="value">{{ storeInfo.storeName }}</span>
        </div>
        <div class="info-item">
          <span class="label">当前过期时间：</span>
          <span class="value"><ShowChileDate :value="storeInfo.expireUnix" /></span>
        </div>
      </div>

      <!-- 续费天数输入 -->
      <div class="renewal-section">
        <el-form :model="formData" :rules="rules" ref="formRef">
          <el-form-item prop="days" label="续费天数">
            <el-input-number v-model="formData.days" :min="1" :max="365" controls-position="right" placeholder="请输入续费天数" />
          </el-form-item>
        </el-form>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading"> 确 定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="AddVipTimeModal">
import { ref, reactive, computed } from "vue";
import ShowChileDate from "@/components/ShowChileDate/index.vue";
import { ElMessage, type FormInstance, type FormItemRule } from "element-plus";
import { addShopVipDayApi } from "@/api/modules/datawarn";

interface StoreInfo {
  id: number;
  storeName: string;
  expireUnix: number;
}

interface Props {
  modelValue: boolean;
  storeInfo: StoreInfo;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  storeInfo: () => ({
    id: 0,
    storeName: "",
    expireUnix: 0
  })
});

const emit = defineEmits(["update:modelValue", "success"]);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val)
});

const formRef = ref<FormInstance>();
const loading = ref(false);

const formData = reactive({
  days: 30
});

const rules = {
  days: [
    { required: true, message: "请输入续费天数", trigger: "blur" },
    { type: "number" as const, min: 1, max: 365, message: "续费天数范围为1-365天", trigger: "blur" }
  ]
} as Record<string, FormItemRule[]>;

const handleSubmit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate();
  loading.value = true;
  const { code } = await addShopVipDayApi({
    id: props.storeInfo.id,
    day_num: formData.days
  });
  if (code === 1) {
    ElMessage({
      message: "更新成功",
      type: "success"
    });
    emit("update:modelValue", false);
    emit("success", false);
  }
  loading.value = false;
};
</script>

<style lang="scss" scoped>
.vip-renewal-container {
  padding: 20px 0;
  .info-section {
    padding: 20px;
    margin-bottom: 24px;
    background: linear-gradient(to right, #f8f9fa, #ffffff);
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 5%);
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      &:last-child {
        margin-bottom: 0;
      }
      .label {
        width: 120px;
        font-size: 14px;
        color: #606266;
      }
      .value {
        font-size: 14px;
        font-weight: 500;
        color: #303133;
      }
    }
  }
  .renewal-section {
    padding: 0 20px;
    :deep(.el-form-item__label) {
      font-weight: 500;
    }
    :deep(.el-input-number) {
      width: 100%;
    }
  }
}
.dialog-footer {
  padding-top: 20px;
  text-align: right;
}
</style>
